const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
const cssmin = require('gulp-cssmin')

// const sass = require('sass')
// const gulpSass = require('gulp-sass')
// const sassObj = gulpSass(sass)
const sass = require('gulp-sass')(require('sass'))

const babel = require('gulp-babel')
const uglify = require('gulp-uglify')

const clean = require('gulp-clean')
const webserver = require('gulp-webserver')
/**
 * html
 */
gulp.task('html', function () {
    return gulp.src('src/pages/**')
        .pipe(htmlmin({
            removeEmptyAttributes: true,
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist/pages/'))
})
/**
 * css
 */
gulp.task('css', function () {
    return gulp.src('src/css/**')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css/'))
})
/**
 * sass
 */
gulp.task('sass', function () {
    return gulp.src('src/sass/**')
        .pipe(sass()) //sass->css
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css/'))
})
/**
 * js
 */
gulp.task('js', function () {
    return gulp.src('src/js/**')
        .pipe(babel({
            presets: ['es2015']//js高版本转低版本
        }))
        .pipe(uglify())//压缩
        .pipe(gulp.dest('dist/js/'))
})
/**
 * static和lib不需要压缩，只需要dest复制过去就行了
 */
gulp.task('static', function () {
    return gulp.src('src/static/**')
        .pipe(gulp.dest('dist/static/'))
})
gulp.task('lib', function () {
    return gulp.src('src/lib/**')
        .pipe(gulp.dest('dist/lib/'))
})

/**
 * 一个一个执行很麻烦，所以就用series或者parallel，执行的时候只需要输入gulp就行了
 */
// gulp.task('series', gulp.series('css', 'sass', 'js', 'html', 'static', 'lib'))
// gulp.task('parallel', gulp.parallel('css', 'sass', 'js', 'html', 'static', 'lib'))

/**
 * clean
 * 为防止文件改名字，没办法覆盖之前dist里面的文件，所以每次执行之前就把dist清除一遍
 */
gulp.task('clean', function () {
    return gulp.src('dist', {
            allowEmpty: true
        })
        .pipe(clean())
})
// 将清除配置成默认任务
// exports.default = gulp.series('clean',gulp.parallel('css', 'sass', 'js', 'html', 'static', 'lib'))
/**
 * webserver执行之后自行打开
 */
gulp.task('webserver', function () {
    return gulp.src('dist')
        .pipe(webserver({
            host: 'localhost',
            port: 3000,
            livereload: true,
            open: './pages/login.html'
        }))
})

/**
 * wstch监听，只要src里面有修改，页面就会跟着修改
 */
gulp.task('watch', function () {
    gulp.watch('./src/css/**', gulp.parallel('css'))
    gulp.watch('./src/sass/**', gulp.parallel('sass'))
    gulp.watch('./src/js/**', gulp.parallel('js'))
    gulp.watch('./src/pages/**', gulp.parallel('html'))
    gulp.watch('./src/lib/**', gulp.parallel('lib'))
    gulp.watch('./src/static/**', gulp.parallel('static'))
})

exports.default = gulp.series('clean', gulp.parallel('css', 'sass', 'js', 'html', 'static', 'lib'), 'webserver', 'watch')